<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="mvc" uri="http://www.trkj.com/mvc/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品咨询</title>
<style type="text/css">
	.dindan{
		height:40px;
		width:80px;
		text-align:center;
		line-height:40px;
		color:#555;
		background-color:#f0f0f0;
		font-size: 14px;
		font-weight: 700;
	}
	.dindanhezi{
		height:40px;
		width:900px;
		border-bottom:1px solid #f0f0f0;
		margin-bottom:10px;
		margin-left:330px;
		text-align:left;
	}
	.table2{
		text-align: center;
		font-size:14px;
		padding-left:20px;
	}
	.table2 tr{
		height:40px;
	}
	.table2  td{
		font-size:12px;
		color:#555;
	}
	.blue{
		font-size:12px;
		color:#2D64B3;
	}
	.consult{
				height: auto;
				width: 220px;
				border-left:2px solid rgba(221,221,221,0.8);
				border-bottom:2px solid rgba(221,221,221,0.8);
				border-right:2px solid rgba(221,221,221,0.8);
				border-top: 22px solid rgba(221,221,221,0.8);
				border-radius:10px;
				display:none;
				position:absolute;
				top:100px;
				left:630px;
				background-color: white;
			}
			.zixun{
				position:relative;
				top:-20px;
				font-size: 16px;
				font-family:"楷体";
				color: white;
			}
			.guanbi{
				position:relative;
				top:-20px;
				right:0px;
				height:20px;
				width:20px;
				float:right;
			}
			.abody{
				height: auto;
				width: 170px;
				border-bottom: 2px solid rgba(221,221,221,0.8);
				margin-left:20px;
			}		
			.bbody{
				height: auto;
				width: 170px;
				margin-left:20px;
			}
			.tit{
				font-size: 20px;
				font-weight: 700;
			}
			.qued{
				width: 40px;
				height: 25px;
				background-color: #33bbee;
				border: 1px solid #33bbee;
				color: white;
				margin:5px 5px 5px 165px;
				border-radius:5px;
			}
			
			.pager1{
	margin-top: 20px;
	padding-left:330px;
	}

	.pager1 a, .btn{
	text-decoration: none;
	color: gray;
	border: 1px solid gray;
	border-radius: 5px;
	font-size: 14px;
	padding: 3px 8px;
	margin-left: 4px;
	}
	
	.pager1 a:HOVER , .btn:HOVER{
	background: gray;
	color: white;
	}
	.hconsultjsp{
		margin-top:50px;
	}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//设置tr背景色偶数为#FAFAFA
	$(".table2").find("tr:odd").css("background-color", "#FAFAFA");
	//点击查看商家回复内容
	$(".blue").click(function(){
		var a=$(this).parent().attr("id");
		$("#"+a).show();
	});
	$(".qued").click(function(){
		$(".consult").hide();
	});
	$(".guanbi").click(function(){
		$(".consult").hide();
	});
});


</script>
</head>
<body>
<div ><%@include file="chead.jsp" %></div>
<div class="hconsultjsp" style="height:570px">
<div style="float:left"><%@include file="hppmenu.jsp" %></div>
<div class="dindanhezi">
	<div class="dindan">
		<span>商品咨询</span>	
	</div>
</div>
<table class="table2"  width="900px" >
			<thead>
				<tr>
					<th>商品名称</th>
					<th>内容</th>
					<th>咨询时间</th>
					<th>回复</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${map.list }" var="u" varStatus="vs">
					<tr>
						<td>${u.g_name}</td>
						<td>${u.ask_content }</td>
						<td>${u.ask_date }</td>
						<td id="${u.id}">
						<c:if test="${u.back_state == 0}">
						<span>未回复</span>
						</c:if>
						<c:if test="${u.back_state == 1}">
						<span class="blue">查看</span>
						</c:if>					
						</td>
						<!-- 点击跳出的弹框 -->
						<div class="consult" id="${u.id}">
							<span class="zixun">商品咨询</span>
							<img class="guanbi" src="image/关闭.png"/>
							<div class="abody">
								<span class="tit">咨询内容：</span><br />
								<span>${u.ask_content }</span><br />
								<span>${u.ask_date }</span>
							</div>
							<div class="bbody"> 
								<span class="tit">商家回复：</span><br />
								<span>${u.back_content }</span><br />
								<span>${u.back_date }</span>
							</div>
							<input type="button" value="确定" class="qued" />
						</div>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<div class="pager1">
			<mvc:pager url="goodask?action=Page" pagesize="${map.pagesize}" count="${map.count }" curpage="${map.curpage }" />
		</div>
	</div>
	<!-- 感兴趣的商品 -->
		<div style="padding-top:40px;"><%@include file="hfooter.jsp" %></div>
		<div ><%@include file="cfooter.jsp" %></div>
</body>
</html>